<template>
  <view class="container">
    <!-- 分类选择卡片 -->
    <view class="card-section">
      <view class="card-content-section">
        <!-- 自定义下拉选择器 -->
        <view class="custom-select" @click="toggleDropdown">
          <text class="select-label">产线信息</text>
          <view class="select-box">
            <text class="selected-text">{{ getSelectedLineName() || '请选择产线' }}</text>
            <up-icon name="arrow-down" size="14" :class="['arrow-icon', { 'rotate': showDropdown }]"></up-icon>
          </view>
          
          <!-- 下拉菜单 -->
          <view class="dropdown-menu" v-if="showDropdown" @click.stop>
            <scroll-view scroll-y class="dropdown-scroll">
              <view 
                v-for="item in state.lineList" 
                :key="item.lineId"
                class="dropdown-item"
                @click="selectLine(item)"
              >
                {{ item.lineName }}
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>

    <!-- 无计划提示 -->
    <view v-if="!state.hasPlan" class="no-plan-tip">
      当前产线无激活的计划信息
    </view>

    <!-- 菜单网格卡片 -->
    <view class="card-section">
      <view class="card-content-section">
        <up-grid :col="4">
          <up-grid-item 
            v-for="(item,index) in state.menuList" 
            :key="index" 
            @click="clickItem(item)"
            class="menu-item"
          >
			<i :class="item.icon" style="font-size: 28px;"></i>
            <text class="grid-text">{{ item.menuName }}</text>
          </up-grid-item>
        </up-grid>
        <up-toast ref="uToastRef" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
import { useUserStore } from "../../store/user";
import { jumpPage } from "../../until";
import { allLine } from "@api/basic/line";
import { getActivatePlan } from "@api/product/order/workOrderPlan.js";

const uToastRef = ref(null);
const userStore = useUserStore();
const showDropdown = ref(false);

const state = reactive({
  menuList: [],
  lineList: [],
  selectLine: null,
  hasPlan: true,
  isLoading: false
})

// 获取选中产线名称
const getSelectedLineName = () => {
  if (!state.selectLine) return '';
  const selectedLine = state.lineList.find(item => item.lineId === state.selectLine);
  return selectedLine ? selectedLine.lineName : '';
}

// 切换下拉框
const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value;
}

// 选择产线
const selectLine = async (item) => {
  state.selectLine = item.lineId;
  uni.setStorageSync('selectLine', item.lineId);
  showDropdown.value = false;
  await checkPlanStatus(item.lineId);
}

// 初始化数据
const initData = async (options) => {
  try {
    state.isLoading = true;
    state.menuList = userStore.getUserInfo().menuList.filter(
      s => s.parentId == options.parentMenuId
    );
    const res = await allLine();
    state.lineList = res.data || [];
    setDefaultLine();
    if (state.selectLine) {
      await checkPlanStatus(state.selectLine);
    }
  } catch (error) {
    console.error("初始化数据失败:", error);
    showToast('error', '初始化数据失败');
  } finally {
    state.isLoading = false;
  }
}

// 设置默认产线
const setDefaultLine = () => {
  const storedLine = uni.getStorageSync('selectLine');
  if (storedLine && state.lineList.some(item => item.lineId == storedLine)) {
    state.selectLine = storedLine;
  } else if (state.lineList.length > 0) {
    state.selectLine = state.lineList[0].lineId;
    uni.setStorageSync('selectLine', state.selectLine);
  }
}

// 检查计划状态
const checkPlanStatus = async (lineId) => {
  try {
    const res = await getActivatePlan(lineId);
    state.hasPlan = res.data != null;
  } catch (error) {
    console.error("检查计划状态失败:", error);
    state.hasPlan = false;
  }
}

// 点击菜单项
const clickItem = (item) => {
  if (!state.selectLine) {
    showToast('none', '请先选择产线', 3000);
    return;
  }
  if (!state.hasPlan) {
    showToast('none', '当前产线无生产计划！', 3000);
    return;
  }
  jumpPage(item.component);
}

// 显示Toast
const showToast = (type, message, duration = 2000) => {
  if (type === 'error' && uToastRef.value) {
    uToastRef.value.show({
      type,
      message,
      duration
    });
  } else {
    uni.showToast({
      icon: type,
      duration,
      title: message
    });
  }
}

onLoad(initData);
</script>

<style scoped>

/* 自定义下拉选择器 */
.custom-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
}

.select-label {
  font-size: 28rpx;
}

.select-box {
  display: flex;
  align-items: center;
}

.selected-text {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.arrow-icon {
  transition: transform 0.3s;
}

.arrow-icon.rotate {
  transform: rotate(180deg);
}

/* 下拉菜单 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 1000;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.dropdown-scroll {
  max-height: 400rpx;
}

.dropdown-item {
  padding: 20rpx;
  font-size: 28rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.dropdown-item:active {
  background-color: #f5f5f5;
}

/* 无计划提示 */
.no-plan-tip {
  text-align: center;
  color: red;
}

/* 菜单网格 */
.menu-item {
  padding: 20rpx 0;
  text-align: center;
}

.grid-text {
  margin-top: 10rpx;
  font-size: 28rpx;
  display: block;
}
</style>